<!-- 第三方支付 -->
 <template>
  <div class="payment-page">
    <h2>第三方支付界面</h2>
    <el-card class="payment-card">
      <p class="instruction">扫一扫付款（元）</p>
      <p class="amount">{{ amount }}</p>
      <img :src="qrCodeUrl" alt="QR Code" class="qr-code"/>
      <p class="countdown">剩余时间：{{ countdown }} 秒</p>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 从路由参数中获取金额
const amount = computed(() => parseFloat(route.query.amount) || 0);

// 生成二维码的 URL（示例使用静态图片）
const qrCodeUrl = ref('https://via.placeholder.com/200x200'); // 示例二维码图片

// 倒计时逻辑
const countdown = ref(10); // 初始时间 60 秒
let intervalId = null;

onMounted(() => {
  intervalId = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(intervalId);
      router.push('/order-success'); // 倒计时结束，跳转到支付成功页面
    }
  }, 1000);
});
</script>

<style scoped>
.payment-page {
  display: flex;
  flex-direction: column; /* 确保子元素垂直排列 */
  align-items: center; /* 水平居中 */
  height: 100vh;
  padding-top: 50px; /* 标题与顶部的距离 */
}

.payment-page h2 {
  margin-bottom: 20px; /* 标题与卡片之间的间距 */
}

.payment-card {
  width: 300px;
  text-align: center;
}

.instruction {
  margin-bottom: 10px;
}

.countdown {
  margin-top: 15px;
  font-size: 14px;
  color: #888;
}

.amount {
  color: red;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.qr-code {
  width: 200px;
  height: 200px;
  margin: 20px 0; /* 调整二维码与上下内容的间距 */
}
</style>